<template>
  <div>
    <Header title="附近门店" :is-arrow="true" back-color="#f1f4f9" />
    <van-tabs v-model="active">
      <van-tab title="全部门店">
        <template v-for="item in shopList" >
          <van-card @click="borrow(item)" :key="item.id">
            <template #thumb>
              <img :src="baseUrl + '/getImgStream?imgPath=' + item.picture" alt="" style="width: 69px">
            </template>
            <template #title>
              <span style="font-size: 16px">{{item.title}}</span>
              <span style="float: right;padding-top:6px">{{item.remark}}</span>
            </template>
            <template #desc>
              <div style="color: #666666">{{item.address}}</div>
              <div>营业时间：09:00-22:00</div>
            </template>
            <template #footer>
              <van-icon name="like-o" />&nbsp;&nbsp;
              <span>可用</span>&nbsp;&nbsp;&nbsp;&nbsp;
              <span>可还</span>
            </template>
          </van-card>
        </template>
      </van-tab>
      <van-tab title="可用门店">内容 2</van-tab>
      <van-tab title="可还门店">内容 3</van-tab>
    </van-tabs>
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        title="请选择充电宝"
        :options="dataList"
        @close="show = false"
        @finish="changeBattery"
      />
    </van-popup>
    <van-button style="position: absolute;bottom: 20px;" size="large" color="teal" text="点击租借" round @click="borrowBattery" ></van-button>
  </div>
</template>

<script>
import Header from '@/components/basic/Header'
import { Dialog } from 'vant'
export default {
  name: 'ShopIndex',
  components: {
    Header
  },
  data () {
    return {
      active: 0,
      shopList: [],
      show: false,
      dataList: [],
      orderInfo: {
        userId: '',
        batteryId: ''
      },
      baseUrl: 'http://123.56.158.143:8250'
    }
  },
  created () {
    this.getRequest('/fro/shop/list').then(({ data }) => {
      if (data.code === 200) {
        this.shopList = data.data
      }
    })
  },
  methods: {
    borrowBattery () {
      Dialog.confirm({
        title: '确认',
        message: '确认租借该充电宝?'
      }).then(() => {
        this.postRequestJson('/fro/order/add', this.orderInfo).then(({ data }) => {
          if (data.code === 200) {
            this.$toast.success(data.message)
            localStorage.setItem('borrowStatus', JSON.stringify(data.data))
            this.$router.push('/')
          } else {
            this.$toast.fail(data.message)
          }
        })
      }).catch(() => {})
    },
    changeBattery (value) {
      this.orderInfo.userId = this.$store.state.user.user.id
      this.orderInfo.batteryId = value.selectedOptions[1].value
    },
    borrow (item) {
      this.dataList = []
      this.getRequest('/fro/shop/equipment/' + item.id).then(({ data }) => {
        console.log(data)
        if (data.code === 200) {
          this.dataList = data.data.map(item => {
            return {
              text: item.name,
              value: item.id,
              children: item.children.map(child => {
                return {
                  text: child.rent,
                  value: child.id
                }
              })
            }
          })
          console.log('@@@@@', this.dataList)
        }
      })
      this.show = true
      // const { user } = this.$store.state.user
      // this.postRequestJson()
      console.log(item)
    }
  }
}
</script>

<style scoped>
.van-card__thumb {
  position: relative;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  width: 69px;
  height: 88px;
  margin-right: 8px;
}

.van-card__footer {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  text-align: left;
  margin-top: -16px;
  margin-left: 12px;
}
</style>
